<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="../static/bootstrap-3.4.1/dist/css/bootstrap.min.css">
    <script src="../static/jQuery-v3.6.0/jQueryv3.6.0.js"></script>
    <script src="../static/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <h2>创建模态框（Modal）</h2><!-- 按钮触发模态框 -->
        <button class="btn btn-danger btn-samll" data-toggle="modal"
            data-target="#myModal">
            开始演示模态框</button>
            <!-- 模态框（Modal） -->

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times; </button>
                        <h4 class="modal-title" id="myModalLabel">
                            模态框（Modal）标题 </h4>
                    </div>
                    <div class="modal-body">
                       用户名： <input type="text">
                       密码：<input type="password">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
                        <button type="button" class="btn btn-primary">
                            提交更改 </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
     <div>
</body>

</html>